<template>
  <div>
    <div class="search-group">
      <div class="search-item">
        <el-input v-model="query.id" placeholder="请输入id" />
        <el-input v-model="query.menuName" placeholder="请输入权限名" />
        <el-input v-model="query.menuCode" placeholder="请输入权限码" />
        <el-input v-model="query.vueTitle" placeholder="请输入组件标题" />
      </div>
      <el-button-group>
        <el-button type="primary" icon="el-icon-plus" @click="add()" />
        <el-button icon="el-icon-search" @click="search" />
        <el-button icon="el-icon-refresh" @click="reset" />
      </el-button-group>
    </div>
    <div class="content">
      <el-table
        v-loading="table.loading"
        row-key="id"
        lazy
        :load="getListData"
        :tree-props="{children: 'childList', hasChildren: 'hasChildren'}"
        :data="table.data"
        border
        style="width: 100%"
      >
        <el-table-column align="center" label="id" prop="id" />
        <el-table-column align="center" label="权限名" prop="menuName" />
        <el-table-column align="center" label="权限码" prop="menuCode" />
        <el-table-column align="center" label="路径" prop="vuePath" />
        <el-table-column align="center" label="组件位置" prop="vueComponent" />
        <el-table-column align="center" label="组件名称" prop="vueName" />
        <el-table-column align="center" label="组件标题" prop="vueTitle" />
        <el-table-column align="center" label="组件图标" prop="vueIcon" />
        <el-table-column align="center" label="父级id" prop="parentId" />
        <el-table-column align="center" label="重定向地址" prop="vueRedirect" />
        <el-table-column align="center" label="操作" fixed="right" width="100px">
          <template slot-scope="{row}">
            <el-button-group class="operation">
              <el-button v-permission="['sys_menu:list']" type="text" @click="edit('see',row.id)">详情</el-button>
              <el-button v-permission="['sys_menu:subTableData:list']" type="text" @click="openSysMenu(row.id)">子表数据
              </el-button>
              <el-button v-permission="['sys_menu:edit']" type="text" @click="edit('edit',row.id)">编辑</el-button>
              <c-button
                v-permission="['sys_menu:delete']"
                type="text"
                auto-confirm
                @confirm="remove(row.id)"
              />
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <table-page
        :total="table.total"
        :current="query.pageNum"
        :size="query.pageSize"
        @settingTablePage="settingTablePage"
      />
    </div>
    <Edit ref="edit" @refreshPageData="search" />
    <OneToManyTable ref="oneToManyTable" />
  </div>
</template>

<script>
import { deleteById, getListByPage, getList } from '@/api/modules/system/sysMenuApi'
import Edit from '@/views/modules/system/sysMenu/operation/sysMenuEdit'
import OneToManyTable from '@/views/modules/system/sysMenu/operation/sysMenuOneToManyTable'
import TablePage from '@/components/tablePage'
import CButton from '@/components/confirmButton/CButton'

export default {
  name: 'SysMenu',
  components: { CButton, TablePage, Edit, OneToManyTable },
  data() {
    return {
      query: {
        pageNum: 1,
        pageSize: 10,
        id: null,
        menuName: null,
        menuCode: null,
        vueTitle: null,
        parentId: ''
      },
      table: {
        data: null,
        total: null,
        loading: false
      }
      /* 字典表数据*/
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    search() {
      this.query.pageNum = 1
      this.getTableData()
    },
    add() {
      this.$refs['edit'].open('add', null)
    },
    settingTablePage(pageNum, pageSize) {
      this.query.pageNum = pageNum
      this.query.pageSize = pageSize
      this.getTableData()
    },
    reset() {
      this.query.id = null
      this.query.menuName = null
      this.query.menuCode = null
      this.query.vueTitle = null
      this.search()
    },
    getTableData() {
      this.query.parentId = ''
      this.table.loading = true
      getListByPage(this.query).then(res => {
        this.table.total = res.total
        this.table.data = res.rows
        this.table.loading = false
      })
    },
    getListData(tree, treeNode, resolve) {
      getList({
        parentId: tree.id
      }).then(res => {
        resolve(res.rows)
      })
    },
    edit(optionType, id) {
      this.$refs['edit'].open(optionType, id)
    },
    openSysMenu(id) {
      this.$refs['oneToManyTable'].open(id)
    },
    remove(id) {
      deleteById(id).then(res => {
        this.$message.success('删除成功')
        this.search()
      })
    }
  }
}
</script>

<style scoped>

</style>
